/* @flow */
'use strict';

import {
    StyleSheet,
    View,
    TouchableOpacity,
    Navigator,
    TextInput,
    ScrollView,
    NavigatorIOS,
    AlertIOS,
    TouchableHighlight,
    Text,
} from 'react-native';
import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import URL from '../config/server';
import {Utils} from '../config/utils';
import {Key} from '../config/key';


const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.pop()}>
                <View style={{flexDirection:'row',padding:5}}>
                    <Icon name="ios-arrow-back" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                    <Text style={{color: 'white', margin: 3,fontSize:16}}>
                        返回
                    </Text>
                </View>
            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, navState) {
        return null;
    },
    Title(route, navigator, index, navState) {
        return (
            <Text style={{color: 'white', margin: 10, fontSize: 20}}>
                意见反馈
            </Text>
        );
    }
};

export default class MyOpin extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: {
                text: ''
            }
        };
    }

    onPress() {
        const OPION = URL.local+'feedback';
        Utils.post(OPION,{username:Key.username,content:this.state.text}, function (data) {
            console.log(data)
        });
        AlertIOS.alert(
            '感谢您的意见.',
            null,
            [
                {text: '返回', onPress: () => {this.props.navigator.pop();}}
            ]
        );

    }

    renderScene() {
        return (
            <ScrollView
                style={styles.container}>
                <View style={styles.content}>
                    <Text style={styles.title}>
                        欢迎您提出宝贵的意见和建议,您的建议对我们改善服务非常有帮助.
                    </Text>
                    <TextInput
                        style={styles.input}
                        onChangeText={(text) => this.setState({text})}
                        value={this.state.text}
                        maxLength={500}
                        multiline={true}
                        placeholder={"请输入您的反馈意见(字数500以内)"}
                    />
                    <TouchableHighlight style={styles.button} onPress={this.onPress.bind(this)} underlayColor='#e02820'>
                        <Text style={styles.buttonText}>提交反馈</Text>
                    </TouchableHighlight>
                </View>
            </ScrollView>
        );
    }

    render() {
        return (
            <Navigator
                renderScene={this.renderScene.bind(this)}
                navigator={this.props.navigator}
                navigationBar={
            <Navigator.NavigationBar 
                style={{backgroundColor: '#e02820', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          }/>
        );
    }
}


const styles = StyleSheet.create({
    nav: {
        flex: 1
    },
    container: {
        flex: 1,
        paddingTop: 70
    },
    content: {
        padding: 20
    },
    title: {
        fontSize: 18,
        paddingBottom: 10
    },
    input: {
        height: 150,
        padding: 5,
        borderColor: 'gray',
        borderWidth: 1,
        fontSize: 15,
        borderRadius: 3
    },
    buttonText: {
        fontSize: 18,
        color: 'white',
        alignSelf: 'center'
    },
    button: {
        height: 36,
        marginTop: 10,
        backgroundColor: '#e02820',
        borderColor: '#e02820',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        alignSelf: 'stretch',
        justifyContent: 'center'
    }
});


